<template>
  <div class="">
    <CommonTitle class="m-t20" titleName="正式项目流程图">
      <template #rightCnBox>
        <span class="title m-l20">项目名称: {{ projectName }}</span>
      </template>
    </CommonTitle>
    <div class="content m-t20">
      <div class="project_jd">
        <div
          v-for="(v, i) in state.stageList"
          :key="v.projectStageId"
          class="shu"
        >
          <div class="dividing" v-if="v.children.length > 0"></div>
          <div class="project_item">
<!--            <div class="arrow" v-if="!(i==state.stageList.length-1)">
              <div class="circle"></div>
              <div class="transverseLine"></div>
              <div class="rightArrow"></div>
            </div>-->
              <div class="arrow" v-if="!(i==state.stageList.length-1)">
                  <div class="circle"></div>
                  <div class="transverseLine"></div>
                  <div class="rightArrow"></div>
              </div>
            <div class="jd_info">{{ v.stageName }}</div>
            <div class="line_and_point">
              <div class="point"></div>
              <div class="line"></div>
            </div>
            <div class="big_box" v-if="v.tasks?.length > 0">
              <div class="jd_time" v-for="item in v.tasks" :key="item.id">
                <div class="taskItem">
                  <div class="taskLine"></div>
                  <div class="taskName">
                    <div class="circle inline-block"></div>
                    {{ item.taskName }}---{{ item.realStartTime }}至{{
                      item.realEndTime
                    }}
                  </div>
                  <!-- <div class="taskName"> {{item.taskName}}---{{item.planStartTime}}-{{item.planEndTime}}</div> -->
                </div>
              </div>
            </div>
          </div>
          <!-- --------- -->
          <!-- <div v-if="v.children.length > 0">
            <div
              class="project_item"
              v-for="vv in v.children"
              :key="vv.projectStageId"
            >
              <div class="jd_info">{{ v.stageName }}</div>
              <div class="line_and_point">
                <div class="point"></div>
                <div class="line"></div>
              </div>
              <div class="jd_time">
                {{ v.planStartTime }}-{{ v.planEndTime }}
              </div>
            </div>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import CommonTitle from '@/components/CommonTitle.vue'
import { getURLhandler } from '@/views/constructionProjectManage/static/utools.js'
import { useRouter, useRoute } from 'vue-router'
import { projectConfigApi } from '@/api/project'
//路由跳转
let router = useRouter()
let route = useRoute()
const props = defineProps({
  projectId: {
    type: String,
    default: ''
  },
  projectName: {
    type: String,
    default: ''
  },
  projectType: {
    type: String,
    default: ''
  }
})
const state = reactive({
  stageList: []
})
// 项目阶段
const getStage = (id, falg = false) => {
  projectConfigApi.getStage(id).then((res) => {
    if (res.code == 200) {
      if (falg) {
      }
      console.log(res)
      state.stageList = res.data
    }
  })
}
const handel = () => {}

onMounted(() => {
  getStage(getURLhandler(route.path).id)
})
</script>
<style lang="scss" scoped>
.title {
  height: 18px;
  font-size: 18px;
  font-family: SourceHanSansCN-Normal, SourceHanSansCN;
  color: #1a1a1a;
}

.content {
  width: 100%;
  min-height: 504px;
  border-radius: 10px;
  border: 1px solid #e3e7f1;
  padding: 40px;
  padding-left: 0px;
}
.inline-block {
  display: inline-block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fc7018;
  vertical-align: middle;
}
.project_jd {
  min-height: 500px;
  // height: 100%;
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  // flex-wrap: wrap;
  // align-items: center;
  overflow-x: auto;
  padding-bottom: 20px;
  .project_item {
    position: relative;
    margin-right: 200px;
    .arrow {
      position: absolute;
      display: flex;
      align-content: center;
      //top: 57%;
      top: 48px;
      right: -223px;

      .circle {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: #fc7018;
      }
      .transverseLine {
        width: 200px;
        height: 5px;
        background: #fc7018;
        margin-top: 5px;
      }
      .rightArrow {
        width: 0;
        height: 0;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 10px solid #fc7018;
      }
    }

    // overflow-y: auto;
    padding: 10px;
    .jd_info {
      margin-top: 30px;
      // margin-bottom: 20px;
      width: 534px;
      line-height: 32px;
      color: #fff;
      text-align: center;
      margin-left: 30px;
      height: 32px;
      background: #d4ae85;
      // border-radius: 16px;
    }
    .big_box {
      height: 400px;
      overflow: auto;
    }
    .jd_time {
      // margin-top: 20px;
      margin-left: 30px;
      .taskItem {
        text-align: center;
        .taskLine {
          height: 40px;
          width: 00px;
          margin: 0 auto;

          border: 3px dashed #fc7018;
        }
      }
    }
  }
}
.shu {
  position: relative;
  height: 100px;

  .dividing {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 2px;
    height: 50%;
    background-color: #fc7018;
    transform: translateY(-48%);
  }
}
</style>
